<template>
	<view class="sub-good-content">
		<view class="good-state">
			<view class="good-state-text">已返还（{{order.id}}）</view>
			<view class="good-time">{{getTime(order.createTime.time)}}</view>
		</view>
		
		<view class="good-info" @tap="taskDetail(order.id)">
			<image :src="order.giftImg?getImg(order.giftImg):'../../static/common/sub-good-img.png'" class="sub-good-img"></image>
			<view class="good-right">
				<view class="good-name">{{order.giftName}}</view>
				<view class="good-price">
					<!-- <view class="back-price">应付：{{order.productActualPrice}}元 回填：{{order.productActualPrice}}元 应返：{{calculate(order.productActualPrice,order.giftPrice)}}元</view> -->
				</view>
			</view>
		</view>
		<view class="reason task-price">
			<text class="empty-class">应付:￥{{order.productActualPrice}}元</text>  
			<text class="empty-class">应返:￥{{calculate(order.pay,order.giftPrice)}}元</text>
			<text>已返还:￥{{calculate(order.pay,order.giftPrice)}}元</text>
		</view>
		<!-- <view class="reason">已返还: {{calculate(order.productActualPrice,order.giftPrice)}}元</view> -->
		<view class="delete-block">
			<view class="delete-btn same-color" @tap="seeGift(order.giftName,order.giftImg)">查看礼品</view>
		<!-- 	<view class="delete-btn quite" @tap="wL(order.yundanId,order.expressName)">查看物流</view> -->
			<view class="delete-btn same-color" @tap="appeal(order.id)">申诉</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:"subGood",
		data(){
			return{
				
			}
		},
		props:{
			order:{
				type:Object
			}
		},
		methods:{
			appeal(id){
				//申诉
				this.$emit('appeal',id);
			},
			calculate(productActualPrice,giftPrice){
				//return Number(productActualPrice) - Number(giftPrice);
				return (Number(productActualPrice)*1000 - Number(giftPrice)*1000)/1000;
			},
			getTime(time){
				return this.$CommonJS.getTime(time,1)
			},
			getImg(url){
				if(url && url.indexOf('http')==-1){
					return this.$CommonJS.getBaseImgUrl(url);
				}else{
					return url
				}
			},
			seeGift(goodsName,goodsImage){
				this.$emit('seeGift',goodsName,goodsImage)
			},
			taskDetail(id){
				uni.navigateTo({
					url:'../../pages/subBack/sub-taskDetail/sub-taskDetail?taskId='+id
				})
			},
			wL(yundanId,expressName){
				this.$emit('wL',yundanId,expressName)
			},
		}
	}
</script>

<style scoped>
	.sub-good-content{
		width:680upx;
		height:auto;
		padding: 10upx 0;
		background:rgba(255,255,255,1);
		box-shadow:0px 9upx 27upx rgba(0,0,0,0.16);
		opacity:1;
		border-radius:18upx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		margin: 10upx 0;
	}
	.good-state{
		width: calc(100% - 50upx);
		height: 60upx;
		display: flex;
		padding: 0 25upx;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 11px;
		border-bottom: 1px solid #F0F3F7;
	}
	.good-state-text{
		color: #F4637A;
	}
	.good-time{
		color: #B1B8C1;
	}
	.good-info{
		width: 100%;
		height: 130upx;
		border-bottom: 1px solid #F0F3F7;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.sub-good-img{
		width: 116upx;
		height: 116upx;
		margin-left: 25upx;
	}
	.good-right{
		width: calc(100% - 141upx);
		display: flex;
		flex-direction: column;
		justify-content:flex-start ;
		align-items: center;
	}
	.good-name{
		width: 100%;
		font-size:12px;
		font-family:Alibaba PuHuiTi;
		font-weight:400;
		line-height:30upx;
		color:rgba(17,23,57,1);
		opacity:1;
		overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		width: calc(100% - 50upx);
		padding: 0 25upx;
	}
	.good-price{
		margin-top: 33upx;
		width: calc(100% - 50upx);
		padding: 0 25upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.sub-tag{
		padding: 5upx 10upx;
		font-size: 11px;
		color:#F0AD4E;
		border-radius: 20upx;
		border: 1px solid #F0AD4E;
	}
	.back-price{
		font-size:12px;
		font-family:Alibaba PuHuiTi;
		font-weight:400;
		line-height:25upx;
		color:rgba(17,23,57,1);
		opacity:1;
	}
	.reason{
		width: calc(100% - 25upx);
		height: 60upx;
		line-height: 60upx;
		font-size: 12px;
		color: #F4637A;
		border-bottom:1px solid #F0F3F7;
		padding-left: 25upx;
	}
	.task-price{
		padding-left: 0;
		padding-right: 25upx;
		color:rgba(17,23,57,1);
		text-align: right;
	}
	.empty-class{
		margin-right: 30upx;
	}
	.backInfo{
		color:rgba(17,23,57,1);
		text-align: right;
	}
	.delete-block{
		width: calc(100% - 25upx);
		height: 78upx;
		padding-right: 25upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.delete-btn{
		padding: 8upx 25upx;
		font-size: 12px;
		border-radius: 20upx;
		margin-left: 20upx;
	}
	.same-color{
		border: 1px solid #F4637A;
		color: #F4637A;
	}
	.quite{
		border:1px solid #666666;
		color: #666666;
	}
</style>
